document.addEventListener('DOMContentLoaded',function(){
    var oBox=document.getElementById('box');
    //定义列
    var C=7;
    //定义列
    var R=4;
    //动态创建span 并且平铺
    for(var i=0; i<R; i++){
        for(var j=0; j<C; j++){
            var oSpan=document.createElement('span');
            //设置每个span的宽高
            oSpan.style.width=oBox.offsetWidth/C+'px';
            oSpan.style.height=oBox.offsetHeight/R+'px';
            //给每个span定位
            oSpan.style.left=j*oBox.offsetWidth/C+'px';
            oSpan.style.top=i*oBox.offsetHeight/R+'px';
            oBox.appendChild(oSpan);
            //给每个span的背景图片定位 平铺后才能拼成一张完整的图片
            oSpan.style.backgroundPosition=-oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
        }
    }
    var aSpan=oBox.children;
    //定义一个图片的初始值
    var iNow=0;
    //定义开关
    var bReady=true;
    //点击图片时每个span爆炸
    oBox.onclick=function(){
        //防止点击过快时图片会跳
        if(bReady==false){return;}
        bReady=false;
        //每点击一次加1
        iNow++;
        for(var i=0; i<aSpan.length; i++){
            //获取每个span移动的距离
            var x=aSpan[i].offsetLeft-oBox.offsetWidth/2;
            var y=aSpan[i].offsetTop-oBox.offsetHeight/2;
            //每个span移动并且随机旋转角度 并且放大
            aSpan[i].style.WebkitTransform='perspective(800px) translate('+x+'px,'+y+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4)';
            aSpan[i].style.WebkitTransition='1s all ease';
            aSpan[i].style.opacity=0;
        }
    };
    //过渡完成后要执行的
    aSpan[1].addEventListener('transitionend',function(){
        for(var i=0; i<aSpan.length; i++){
            //瞬间把爆炸出去的图片还原
            aSpan[i].style.WebkitTransform='perspective(800px) translate(0px,0px) rotateX(0deg) rotateY(0deg) scale(1)';
            aSpan[i].style.opacity=1;
            //瞬间回来的过程不需要过渡时间 所以把它干掉
            aSpan[i].style.WebkitTransition='none';
            //换图
            aSpan[i].style.backgroundImage='url("img/'+iNow%3+'.jpg")';
            oBox.style.backgroundImage='url("img/'+(iNow+1)%3+'.jpg")';
            //过渡完成后允许点击
            bReady=true;
        }
    },false);
    //随机数函数
    function rnd(n,m){
        return parseInt(Math.random()*(m-n)+n);
    }
},false);
